<template>
  <div style="position: relative">
  <div class="comment">
    <el-card>
      <el-alert
          title="订单评论"
          type="success"
          center
          show-icon>
      </el-alert>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="usernumber"
            label="评论id"
            width="150">
        </el-table-column>
        <el-table-column
            fixed
            prop="usernumber"
            label="评论时间"
            width="150">
        </el-table-column>
        <el-table-column
            fixed
            prop="usernumber"
            label="评论编号"
            width="150">
        </el-table-column>
        <el-table-column
            fixed
            prop="usernumber"
            label="用户名"
            width="150">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户账号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="product_name"
            label="商品名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="product_no"
            label="商品编号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="star"
            label="评论等级"
            width="100">
        </el-table-column>
        <el-table-column
            prop="comment"
            label="评论内容"
            width="300">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      <div class="des">-->
      <!--        <el-descriptions :size="size" border>-->
      <!--          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>-->
      <!--          <el-descriptions-item label="用户账号">18100000000</el-descriptions-item>-->
      <!--          <el-descriptions-item label="商品名称">苏州市</el-descriptions-item>-->
      <!--          <el-descriptions-item label="商品编号">-->
      <!--            <el-tag size="small">学校</el-tag>-->
      <!--          </el-descriptions-item>-->
      <!--          <el-descriptions-item label="买家评论">-->
      <!--            王磊家的鱼很好吃-->
      <!--          </el-descriptions-item>-->
      <!--          <el-descriptions-item label="评论星级">-->
      <!--            <el-rate-->
      <!--                disabled-->
      <!--                v-model="value"-->
      <!--                show-text>-->
      <!--            </el-rate>-->
      <!--          </el-descriptions-item>-->
      <!--        </el-descriptions>-->
      <!--        <el-divider></el-divider>-->
      <!--      </div>-->

      <!--      <div class="des">-->
      <!--        <el-descriptions :size="size" border>-->
      <!--          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>-->
      <!--          <el-descriptions-item label="用户账号">18100000000</el-descriptions-item>-->
      <!--          <el-descriptions-item label="商品名称">苏州市</el-descriptions-item>-->
      <!--          <el-descriptions-item label="商品编号">-->
      <!--            <el-tag size="small">学校</el-tag>-->
      <!--          </el-descriptions-item>-->
      <!--          <el-descriptions-item label="评论星级">-->
      <!--            <el-rate-->
      <!--                disabled-->
      <!--                v-model="value"-->
      <!--                show-text>-->
      <!--            </el-rate>-->
      <!--          </el-descriptions-item>-->
      <!--        </el-descriptions>-->
      <!--        <el-divider></el-divider>-->
      <!--      </div>-->
      <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </el-card>
  </div>
  </div>
</template>

<script>
export default {
  name: "OrderComments",
  data() {
    return {
      value: 3,
      size: "mini",
      tableData: [{
        usernumber: '2016-05-02',
        username: '王小虎',
        product_name: '上海',
        product_no: '普陀区',
        star: 200333,
        comment: '王磊家的鱼很好吃'
      }, {
        usernumber: '2016-05-02',
        username: '王小虎',
        product_name: '上海',
        product_no: '普陀区',
        star: 200333,
        comment: '王磊家的鱼很好吃'
      },
        {
          usernumber: '2016-05-02',
          username: '王小虎',
          product_name: '上海',
          product_no: '普陀区',
          star: 200333,
          comment: '王磊家的鱼很好吃'
        },
      ]
    }
  }
}
</script>

<style scoped>
.comment{
  /*margin-left: 150px;*/
  position: absolute;
  left: 50%;
  width: 90%;
  transform: translateX(-50%);
}
.des {
  margin-top: 10px;
  transition: all 1s;
}

.des:hover {
  width: 110%;
  height: 110%;
  background-color: #8c939d;
  /*margin-top: 4px;*/
  /*box-shadow: #8c939d 1px 1px 1px;*/
}
</style>
